<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="padding: 100px">
<canvas id="cvs" width="900" height="600" style=" border: 1px solid #000;"></canvas>
<script>
    //1获取标签和上下文
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    //2
    var marginWH = 10;
    var row = cvs.height/marginWH;
    var col = cvs.width/marginWH;
    //3
    for (var i=1; i<row;i++){
        ctx.moveTo(0,i*marginWH);
        ctx.lineTo(cvs.width,i*marginWH);
    }
    for (var i=1; i<col;i++){
        ctx.moveTo(i*marginWH,0);
        ctx.lineTo(i*marginWH,cvs.height);
    }
    ctx.lineWidth =0.5;
    ctx.strokeStyle='red';
    ctx.stroke();
    //4
    var maxWidth =500;
    var maxHeight =400;
    var x0=100,y0=500;

    //5 x
    ctx.beginPath();
    ctx.moveTo(x0,y0);
    ctx.lineTo(x0+maxWidth,y0);
    ctx.lineTo(x0+maxWidth-marginWH,y0-marginWH);
    ctx.moveTo(x0+maxWidth-marginWH,y0+marginWH);
    ctx.lineTo(x0+maxWidth,y0);

    //6 y
    ctx.moveTo(x0,y0);
    ctx.lineTo(x0,y0-maxHeight);
    ctx.lineTo(x0-marginWH,y0-maxHeight+marginWH);
    ctx.moveTo(x0+marginWH,y0-maxHeight+marginWH);
    ctx.lineTo(x0,y0-maxHeight);

    ctx.strokeStyle='blue';
    ctx.stroke();

    //7折线
    var data = [20,10,40,50,30,55,70,50];
    var w =maxWidth/data.length;
    var h = maxHeight/100;//绘制比例
    var pointArr = [];
    for (var i = 0; i < data.length; i++) {
        pointArr.push({
            x:x0 +(i+1)*w,y:y0 - h*data[i]
        })
    }

    ctx.beginPath();
    ctx.moveTo(x0,y0);
    for (var i = 0; i < pointArr.length; i++) {
        ctx.lineTo(pointArr[i].x,pointArr[i].y);
    }
    ctx.strokeStyle='green';
    ctx.stroke();

</script>

</body>
</html>